<template>
  <div
    style="padding: 5px 25px;
    background-color: rgb(240, 242, 245);
    position: relative;"
  >
    <el-card>
      <el-main>
        <el-table
          align="center"
          style="width: 100%"
          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        >
          <el-table-column
            prop="bookname"
            label="书名"
          />
          <el-table-column
            prop="bookauthor"
            label="作者"
          />
          <el-table-column
            prop="booknumber"
            label="书号"
          />
          <el-table-column
            prop="bookison"
            label="状态"
          />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="plain"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <div class="block">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          @current-change="current_change"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import BookInformation from '../book/information'
import { getBookByName } from '@/api/book'

export default {
  name: 'BookOffShelf',
  comments: { BookInformation },
  data() {
    return {
      total: 0,
      pageSize: 11,
      currentPage: 1,
      search: '',
      searchBy: 'name',
      tableData: []
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    current_change(value) {
      this.currentPage = value
      this.currentChangePage(this.tableData, value)
    },
    currentChangePage(list, currentPage) {
      let from = (currentPage - 1) * this.pageSize
      const to = currentPage * this.pageSize
      this.tempList = []
      for (; from < to; from++) {
        if (list[from]) {
          this.tempList.push(list[from])
        }
      }
    },
    // current_change: function(currentPage) {
    //   this.currentPage = currentPage
    //   console.log(this.currentPage)
    // },
    getTableData() {
      const key = { 'bookname': '' }
      getBookByName(key).then(response => {
        this.tableData = response
        this.total = Math.ceil(this.tableData.length / 10)
        console.log(this.total)
      })
    }
  }
}
</script>

<style scoped>
</style>
